<template>
<div>
  <el-row :gutter="12">
  <el-col :span="24">
    <el-card class="box-card">
  <el-form :inline="true" :model="formInline" >
  <el-form-item label="学科名称">
    <el-input v-model="formInline.user"></el-input>
    <datalist>
    <option value=""></option>
    </datalist>
  </el-form-item>
    <el-button @click="clear">清除</el-button>
    <el-button type="primary"  @click="searchbtn">搜索</el-button>
    <el-button style="float:right" type="success" icon="el-icon-edit" @click="addSubject">新增学科</el-button>
    <el-button  style="float:right;" type="warning" roun @click="exportexcel">
       Excel导出
      </el-button>
      </el-form>
      <el-alert
      style="margin-bottom: 10px;"
      :closable="false"
       type="info"
        show-icon>
    <span >数据一共{{ total }}条</span>
     </el-alert>

      <el-card>
     <el-table :data="tableDate">
        <el-table-column label="序号" type="index" :index="indexMethod"/>
          <el-table-column label="学科名称" prop="subjectName" />
          <el-table-column label="创建者" prop="username">
          </el-table-column>
          <el-table-column label="创建日期" prop="addDate" width="180">
         <template #default="{row}">
             {{formateTime(row.addDate)}}
         </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay"  :formatter="formatterFormOfEmpment" width="120"/>
          <el-table-column label="二级目录" prop="twoLevelDirectory"/>
          <el-table-column label="标签" prop="tags"/>
          <el-table-column label="题目数量" prop="totals">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
                @click="SubjectClassify(row)"
              >学科分类</el-button>
              <el-button
                type="text"
                size="small"
                @click="SubjectLabel(row)"
              >学科标签</el-button>
              <el-button
                type="text"
                size="small"
                @click="updateSubject(row)"
              >修改</el-button>
              <el-button
                type="text"
                size="small"
                @click="delSubject(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

     <div class="block" style="margin:10px;display:flex;justify-content:flex-end">
    <span class="demonstration"></span>
            <!-- current-page表示的当前页 -->
            <!-- page-sizes:供我们下拉选择的页容量 -->
            <!-- pagesize:表示当前页容量（一般和page-sizes数组中的第一个值是对应的） -->
            <!-- layout：表示分页的样式展示 -->
            <!-- total表示的是一共有多少条数据 -->
            <!-- @size-change：当每页页容量发生变化时触发 -->
            <!-- @current-change ：页码发生变化时触发 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 30, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
   <!-- 新增学科子组件 -->
      </el-card>
      </el-col>
    </el-row>
    <HmCpt1  :show-dialog.sync="showAddDeptDialog"  ref="Hmcpt1"></HmCpt1>
</div>

</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
import HmCpt1 from '../components/subjects-add'

export default {
  data () {
    return {

      page: 1, // 页数
      pagesize: 10, // 每页条数 默认情况每页5条
      total: 0, // 数组总条数

      showAddDeptDialog: false, // 弹窗默认是关闭
      formInline: {
        user: ''
      },
      tableDate: [] // 表格数据

    }
  },
  // 注册
  components: {
    HmCpt1
  },
  /**
   * 生命周期钩子函数创建
   */
  created () {
    this.getSubjectList()
  },
  methods: {
    /**
     * Excel导出
     */
    async exportexcel () {
      const { data: { items } } = await list(1, this.total)
      const headerArr = ['学科名称', '创建者', '创建日期', '前台是否显示', '二级目录', '标签']
      const headersRelations = {
        学科名称: 'subjectName',
        创建者: 'username',
        创建日期: 'addDate',
        前台是否显示: 'tags',
        二级目录: 'twoLevelDirectory',
        标签: 'creatorID'
      }
      const arr = this.formateData(items, headerArr, headersRelations)
    
                    import(`@/vendor/Export2Excel`).then(excel=>{
                    excel.export_json_to_excel({
                      //导出表头
                      header:headerArr,
                      //导出数据
                            data:arr,
                            //文件名
                            filename: '学科管理信息',
                            //单元格宽度是否自适应
                            autoWidth: true,
                            bookType: 'xlsx'
                    })
      })
    },
    formateData (items, headerArr, headersRelations) {
      const result = []
      items.forEach(item => {
        const tempArr = []
        headerArr.forEach(key => {
          const engLishkey = headersRelations[key]
          const value = item[engLishkey]
          tempArr.push(value)
        })
        result.push(tempArr)
      })
      return result
    },
    /**
     * 获取学科列表
     */
    async getSubjectList () {
      const sbdata = {
        page: this.page,
        pagesize: this.pagesize
      }
      const { data } = await list(sbdata)
      this.total = data.counts
      this.tableDate = data.items
    },
    /**
     * 页面容量变化
     * @param {*} val
     */
    handleSizeChange (val) {
      // 当前页
      this.page = 1
      // 当前页容量
      this.pagesize = val
      this.getSubjectList()
    },
    /**
     *
     * 页码发生变化的时候
     */
    handleCurrentChange (val) {
      this.page = val
      this.getSubjectList()
    },
    /**
     *
     * 页码索引
     */
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },
    /**
     * 前台是否显示
     */
    formatterFormOfEmpment (row, column, cellValue, index) {
      if (Number(cellValue) === 1) {
        return '是'
      } else {
        if (Number(cellValue) === 0) {
          return '否'
        }
      }
    },
    /**
     * 时间日期格式化处理
     */
    formateTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    /**
     * 新增学科
     */
    async addSubject () {
      this.showAddDeptDialog = true
    },
    /**
     * 删除学科
     */
    delSubject (id) {
      this.$confirm('亲!确定要删除吗?', '温馨提示').then(async () => {
        await remove({ id })
        this.$message.success('亲,删除成功了')
        this.getSubjectList()
      }).catch(() => {
      })
    },
    /**
     * 数据回显==修改
     */
    updateSubject (row) {
      this.showAddDeptDialog = true
      this.$refs.Hmcpt1.updateEmit(row)// 父组件用子组件内部的方法
    },
    /**
     * 路由跳转到学科目录
     */
    SubjectClassify (row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          name: row.subjectName,
          id: row.id
        }
      })
    },
    /**
     * 路由跳转到学科标签
     */
    SubjectLabel (row) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          name: row.subjectName,
          id: row.id
        }
      })
    },
    /**
     * 搜索
     */
    async searchbtn () {
      const sbdata = {
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.formInline.user
      }
      const { data } = await list(sbdata)
      this.total = data.counts
      this.tableDate = data.items
    },
    /**
     * 清除
     */
    clear () {
      this.formInline.user = ''
    }
  }

}

</script>

<style scoped lang="scss">
::v-deep .el-alert__icon.is-big{
  font-size: 16px;
  width: 16px;
}
</style>
